<template>
  <div class="promotion-list-page">
    <el-main class="main-content">
      <h2 class="page-title">{{ promotionTypeName }}活动列表</h2>
      
      <!-- Promotion List -->
      <el-row :gutter="20" class="promotion-grid">
        <el-col :span="6" v-for="promotion in promotions" :key="promotion.id" class="promotion-card">
          <el-card :body-style="{ padding: '0px' }" shadow="hover">
            <div class="card-content">
              <h3 class="promo-title">{{ promotion.name }}</h3>
              <p class="promo-time">时间: {{ formatDate(promotion.startTime) }} - {{ formatDate(promotion.endTime) }}</p>
              <p class="promo-status">状态: {{ getPromotionStatus(promotion.status) }}</p>
              <el-button type="primary" size="small" @click="viewPromotion(promotion.id)">查看详情</el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- Pagination -->
      <div class="pagination" v-if="total > 0">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="total"
          :page-sizes="[10, 20, 50]"
          layout="total, sizes, prev, pager, next"
          @size-change="handlePageSizeChange"
          @current-change="handlePageChange"
        />
      </div>
    </el-main>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { getPromotions } from '@/api/promotion';

// State
const route = useRoute();
const router = useRouter(); 
const promotionTypeId = ref(route.params.typeId);
const promotionTypeName = ref('');
const promotions = ref([]);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

// Promotion types mapping
const promotionTypes = {
  1: '秒杀',
  2: '团购',
  3: '满减',
  4: '套餐'
};

// Methods
const fetchPromotions = async (page = 1, size = 10) => {
  try {
    const response = await getPromotions({
      type: promotionTypeId.value,
      page,
      size
    });
    console.log(response)
    if (response.data.code === "0" || response.data.code === "200") {
      promotions.value = response.data.data.list;
      total.value = response.data.data.list.length;
      currentPage.value = page;
      pageSize.value = size;
      promotionTypeName.value = promotionTypes[promotionTypeId.value] || '未知类型';
    } else {
      console.log(response.data.code)
      ElMessage.error(response.message || '获取促销活动失败');
    }
  } catch (error) {
    console.log(error)
    ElMessage.error('获取促销活动失败');
  }
};

const handlePageChange = async () => {
  await fetchPromotions(currentPage.value, pageSize.value);
};

const handlePageSizeChange = async () => {
  currentPage.value = 1; // Reset to first page
  await fetchPromotions(1, pageSize.value);
};

const viewPromotion = (promotionId) => {
  const type = promotionTypeId.value;
  console.log(type)
  if (type === '1') {
    router.push(`/promotions/seckill/${promotionId}`);
  } else if (type === '2') {
    router.push(`/promotions/groupbuy/${promotionId}`);
  } else if (type === '3') {
    router.push(`/promotions/fullReduction/${promotionId}`);
  }else if (type === '4') {
    router.push(`/promotions/combo/${promotionId}`);
  }else {
    ElMessage.warning('该类型暂未实现详情页');
  }
};

const getPromotionStatus = (status) => {
  const statuses = { 0: '未开始', 1: '进行中', 2: '已结束' };
  return statuses[status] || '未知';
};

const formatDate = (dateStr) => {
  return dateStr ? new Date(dateStr).toLocaleDateString() : 'N/A';
};

// Lifecycle
onMounted(async () => {
  await fetchPromotions();
});
</script>

<style scoped>
.promotion-list-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
  background: #f5f7fa;
  min-height: 100vh;
}

.page-title {
  font-size: 24px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 24px;
  text-align: center;
}

.main-content {
  margin: 24px 0;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 48px);
}

.promotion-grid {
  margin-top: 24px;
  flex: 1;
}

.promotion-card {
  margin-bottom: 24px;
}

.promotion-card .el-card {
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}

.promotion-card .el-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(64, 158, 255, 0.15);
}

.card-content {
  padding: 16px;
  text-align: center;
  background: #fafbfc;
}

.promo-title {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 10px;
  color: #303133;
}

.promo-time, .promo-status {
  font-size: 14px;
  color: #606266;
  margin-bottom: 8px;
}

.promo-status {
  font-weight: 500;
  color: #67c23a;
}

.el-button[type="primary"] {
  border-radius: 20px;
  font-weight: 500;
  letter-spacing: 1px;
  padding: 6px 20px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
</style>